.led-container {

    width: 30rem;
    height: 30rem;

    --color-led: var(--color-fill);
    --alpha-fill-off: 0;
    --alpha-fill-on: 1;

    will-change: --opacity;

    inner {


        --color-fill: var(--color-led);
        --alpha-fill: calc(var(--alpha-fill-off) + var(--opacity) * (var(--alpha-fill-on) - var(--alpha-fill-off)));

        position: relative;
        flex: 1;
        padding: --widget-padding;

        @include pseudo-stroke();
        @include pseudo-fill();

        &:before, &:after {
            border-radius: var(--border-radius);
            will-change: opacity;
        }
    }

}

.text-container {

    width: 90rem;
    height: 60rem;

    --alpha-stroke: 0;
    --alpha-fill-off: 0.1;
    --alpha-fill-on: 1;
    --widget-padding: -1rem;
    --text-padding: calc(var(--widget-padding) + 8rem);

    inner {
        @include pseudo-stroke();
        @include pseudo-fill($z: -1);

        padding: var(--widget-padding);

        display: flex;
        width: 100%;

    }

    label {

        opacity: var(--alpha-fill-on);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: pre;
        line-height: 100%;
        overflow: hidden;
        text-align: center;
        word-wrap: break-word;
        padding: var(--text-padding);

        &.right {
            text-align: right;
            justify-content: flex-end;
        }
        &.left {
            text-align: left;
            justify-content: flex-start;
        }
        &.top {
            align-items: flex-start;
        }
        &.bottom {
            align-items: flex-end;
        }
        &.wrap {
            white-space: pre-wrap;
            word-break: break-all;
        }
        &.wrap-soft {
            word-break: normal
        }
        &.vertical {
            transform: rotate(180deg);
            text-overflow: ellipsis;
            -webkit-writing-mode:vertical-rl;
            writing-mode:vertical-rl;
            i {
                transform: rotate(180deg);
                writing-mode: initial;
            }
        }
        i {
            margin-top: -1rem;
        }
    }
}
